<template>
    <a-upload  :isMultiple="isMultiple" :defaultFileList="defaultFileList" :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload" @preview="handleDownload">
      <a-button v-if="isMultiple"> <a-icon type="upload" />{{$t('common.btn.upload')}}</a-button>
      <a-button v-else :type="isEdit ? 'primary' : ''" :disabled="!isEdit"> <a-icon type="upload" />{{$t('common.btn.upload')}}</a-button>
    </a-upload>
</template>
<script>
export default {
  data() {
    return {
        fileList: [], // 上传附件
    }
  },
  props: {
    defaultFileList: {
      type: Array,
      default: function() {
        return []
      }
    },
    isMultiple: {
      type: Boolean,
      default: true
    },
    index: {
      type: Number
    },
    isEdit: {
      type: Boolean,
      default: true
    },
  },
  watch: {
    defaultFileList(val) {
      this.fileList = val
    }
  },
  methods: {
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
      this.$emit('remove', file, this.fileList)
    },
    beforeUpload(file) {
      if (this.isMultiple) {
        this.fileList = [...this.fileList, file];
      } else {
        this.fileList = [file];
      }
      this.$emit('upload', this.fileList, this.index)
      return false;
    },
    handleDownload(file) {
      file.oid = file.uid
      this.$emit('download', file)
    }
  }
}
</script>
<style scoped lang="less">
/deep/ .ant-upload-list{
  width: 400px;
}
/deep/ .ant-upload-list-item-name{
  width: 300px;
}
</style>